|
WMTS（Web Map Tile Service）是最常用的网络地图服务之一，基于OGC的开放标准，可以兼容常用的桌面GIS和WebGIS框架。
OpenLayers是一个专为WebGIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，目前最新版本为8.2.0。
目前，网上最新的遥感影像是四维地球影像(四维地球遥感云服务平台)，时效性为2023年中期，超过了天地图和谷歌地球，也是奥维互动地图的默认影像地图。
四维地球影像接口API文档如下：
四维地球遥感云服务平台 https://siweiearth.com/sw-nav/helpDoc?file=API%2FWMTS%E6%9C%8D%E5%8A%A1%E6%B5%8F%E8%A7%88.md&title=WMTS%E6%9C%8D%E5%8A%A1%E6%B5%8F%E8%A7%88OpenLayers提供WMTS服务接口，一般使用墨卡托投影（EPSG:3857），所以使用如下WMTS链接：
https://swapi.siweiearth.com/sj_raster/v6/wmts/image_tile_mg/{terminal}/{data_id}/{data_version}?service=wmts&request=gettile
此外，还需要申请ak，用于获取影像调用权限，ak获取方法如下：
四维地球遥感云服务平台https://siweiearth.com/sw-nav/helpDoc?file=dev%2F%E8%AE%A4%E8%AF%81%E9%89%B4%E6%9D%83.md&title=%E8%AE%A4%E8%AF%81%E9%89%B4%E6%9D%83具体代码如下：
OpenLayers调用四维地球示例
html, body, #map {
border: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
window.onload = function() {
let projection = ol.proj.get('EPSG:3857'); // 获取web墨卡托投影坐标系
let projectionExtent = projection.getExtent(); // web墨卡托投影坐标系的四至
let width = ol.extent.getWidth(projectionExtent); // web墨卡托投影坐标系的水平宽度，单位米
let resolutions = []; // 瓦片分辨率
let matrixIds = []; // 可以在元数据中找到
for(let z = 0; z < 19; z++){
resolutions[z] = width / (256 * Math.pow(2, z));
matrixIds[z] = z;
}
let wmtsTileGrid = new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent), // 原点（左上角）
resolutions: resolutions, // 分辨率数组
matrixIds: matrixIds // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
});
// WMTS数据源与地图
let wmtsSource = new ol.source.WMTS({
url: "https://swapi.siweiearth.com/sj_raster/v6/wmts/image_tile_mg/system/12621098501/1?service=wmts&request=gettile&ak=",
matrixSet: 'EPSG:3857', // 投影坐标系参数矩阵集
format: 'image/png', // 图片格式
projection: projection, // 投影坐标系
tileGrid: wmtsTileGrid
});
let wmtsLayer = new ol.layer.Tile({
source: wmtsSource
});
var osmSource = new ol.source.OSM();
//实例化地图对象
var map = new ol.Map({
//目标容器
target: 'map',
//图层
layers: [
//加载瓦片网格图层
wmtsLayer,
//瓦片行列号图层，可隐藏
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857', //地图投影坐标系
tileGrid: osmSource.getTileGrid() //获取瓦片网格信息
})
})
],
//实例化视图对象
view: new ol.View({
//视图中心
center: ol.proj.transform([114.76116, 30.397947], 'EPSG:4326', 'EPSG:3857'),
//视图缩放等级
zoom: 11
})
});
};
效果如下图所示：
|